<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_common.areacode }}</view>
				<view></view>
			</view>
			
			<!-- 搜索框 -->
			<view
			class="search-container u-m-t-16"
			style="padding: 0 40rpx 24rpx;">
				<view class="flex-center search-box">
					<view class="clear-flex u-m-r-20">
						<image
						src="@/static/image/common/search_grew.png"
						style="width: 36rpx; height: 36rpx"
						mode="widthFix"></image>
					</view>
					<input
					v-model="keyword"
					:placeholder="lang_common.search_native"
					style="width: 100%;"
					/>
				</view>
			</view>
			
			<scroll-view
			scroll-x>
				<view></view>
			</scroll-view>
		</view>
		
		<!-- 数据列表 -->
		<view class="">
			<scroll-view
			scroll-y
			style="height: calc(100vh - 220rpx - var(--status-bar-height)); width: 100%">
				<view>
					<view
					v-for="(sort, sindex) in list"
					:key="sindex"
					>
						<view
						style="padding: 30rpx 0 14rpx 24rpx"
						class="sort-name u-f-26 u-lh-36 color-grew"
						>{{ sort.sortName }}</view>
						<view
						v-for="(item, index) in sort.list"
						:key="index"
						:style="{
							borderTop: `${ index > 0 ? 2 : 0 }rpx solid #EEEEEE`
						}"
						class="u-p-24 bg-white"
						@click="changeAction(item)"
						>
							<view class="flex-between u-f-34 u-lh-48">
								<view>{{ item[lang] }}</view>
								<view>+{{ item.code }}</view>
							</view>
						</view>
					</view>
					
					<!-- 留空 -->
					<view style="height: 200rpx;"></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import areacode from '@/utils/areacode.js'
	export default {
		data() {
			return {
				event: null,
				keyword: ''
			}
		},
		computed: {
			list() {
				// 初始化列表
				let list = areacode.list || []
				// 关键字筛选
				let keyword = this.keyword && this.keyword.toUpperCase() || ''
				if (keyword) {
					list = list.filter(item => {
						for (let key in item) {
							let transformValue = item[key] && item[key].toUpperCase() || '-'
							if (transformValue.indexOf(keyword) > -1) {
								return true
							}
						}
						return false
					})
				}
				// 根据英文首字母进行排序
				let sortList = []
				list.map(item => {
					let sortName = item.en.toUpperCase().slice(0, 1)
					let getSindex = () => sortList.findIndex(i => sortName === i.sortName)
					if (!sortList.length || getSindex() === -1) {
						sortList.push({
							sortName,
							list: []
						})
					}
					let sindex = getSindex()
					sortList[sindex].list.push(item)
				})
				return sortList
			}
		},
		onLoad() {
			// 获取全局事件
			this.event = this.getOpenerEventChannel();
			this.event.on('areacode-page', (e) => {
				console.log(e)
			})
		},
		methods: {
			// 内容收起后触发
			closeAction() {
				// 重置搜索关键字
				this.keyword = ''
				this.jumpBack()
			},
			// 选中国际区
			changeAction(item) {
				this.event.emit('change', item)
				this.closeAction()
			}
		}
	}
</script>

<style scoped lang="scss">
	.search {
		&-box {
			padding: 20rpx 24rpx;
			border-radius: 10rpx;
			background-color: #F6F6F6;
		}
	}
	.sort-name {
		position: sticky;
		top: -2rpx;
		left: 0rpx;
		background-color: #f9f9f9;
	}
</style>
